<template>
    <div>
        <el-button @click="isShow=true">点击显示select表单增行</el-button>
        <el-dialog title="select表单增行" :visible.sync="isShow" :close-on-click-modal="false" :show-close="false"
            width="80%" :modal-append-to-body="false" :append-to-body="true">
            <el-radio-group v-model="radioType">
                <el-radio :label="item.value" v-for="item,index in checkedFriendList">{{item.label}}</el-radio>
            </el-radio-group>

            <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" :inline="true" class="demo_dynamic"
                v-if="radioType==1">
                <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" class="dv_hang fontSize"
                    :key="domain.key" :prop="'domains.' + index + '.value'"
                    :label="index == 0 ? 'step' + `${index + 1}` : ''"
                    :rules="{ required: true, message: '不能为空', trigger: 'blur' }" style="width: 100%">
                    <div class="tr" @click.prevent="removeDomain(domain)">
                        <img src="./images/delIco.png" v-if="index > 0" class="delIco" />
                        <span class="fontSize" v-if="index > 0">step{{ `${index + 1}` }}</span>
                    </div>
                    <el-select v-model="domain.value" class="selBtm" placeholder="请选择" @change="changeFn">
                        <el-option v-for="(item, index) in listOptions" :label="
                  item.categoryName +
                  '-' +
                  (item.summary.length > 20
                    ? item.summary.slice(0, 20) + '...'
                    : item.summary)
                " :value="item.id" :key="index">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div class="addTr" type="primary" size="mini" @click="addDomain">
                    <img src="./images/addIco.png" class="addIco fontSize" alt="" />继续添加
                </div>
            </el-form>


            <el-row class="dialog-footer">
                <el-button @click="isShow = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('dynamicValidateForm')">确 定</el-button>
            </el-row>

        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dynamicValidateForm: {
                    domains: [{
                        value: "",
                    }, ],
                },
                listOptions: [{
                        categoryName: "陪伴话术",
                        id: "1",
                        name: "陪伴标题1",
                        summary: "陪伴简介111111",
                    },
                    {
                        categoryName: "陪伴话术",
                        id: "2",
                        name: "陪伴话术二",
                        summary: "盘震荡走低，三大指数",
                    },
                    {
                        categoryName: "陪伴话术",
                        id: "3",
                        name: "陪伴话术三",
                        summary: "证券投资是一个长期的过程，",
                    },
                    {
                        categoryName: "陪伴话术",
                        id: "3",
                        name: "市场观点",
                        summary: "于延发年报等因素，至少有32家香港上市公司",
                    },
                ],
                isShow: false, // 弹窗显示
                radioType: "0", //当前单选按钮
                checkedFriendList: [{
                        // 陪伴话术单选
                        value: "1",
                        label: "是",
                    },
                    {
                        value: "0",
                        label: "否",
                    },
                ],
                // 提交参数ids
                submitIds: [],
            };
        },

        computed: {

        },

        methods: {
            //select选择
            changeFn() {
                this.$refs['dynamicValidateForm'].validate()
            },
            addDomain() {
                this.dynamicValidateForm.domains.push({
                    value: ''
                })
            },
            removeDomain(item) {
                var index = this.dynamicValidateForm.domains.indexOf(item)
                if (index !== -1) {
                    this.dynamicValidateForm.domains.splice(index, 1)
                }
            },
            zhuan(item){
                return JSON.parse(JSON.stringify(item))
            },
            submitForm(formName) {
                if (this.radioType == 1) {
                    console.log(this.zhuan(this.dynamicValidateForm),'这是选择的。。。')
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let wordsIds = []
                            this.dynamicValidateForm.domains.filter(item => {
                                wordsIds.push(item.value)

                            })
                            this.submitIds = Array.from(new Set(wordsIds))

                            console.log(this.submitIds, '通过了。。。')

                            this.isShow = false;
                            //清空
                            this.dynamicValidateForm = {
                                domains: [{
                                    value: ''
                                }]
                            },
                             this.radioType = "0";
                             // select选择ids
                             this.submitIds=[]

                        } else {
                            console.log('没通过')
                        }
                    })
                } else {
                    if (!this.radioType) {
                        alert('请选择')
                    } else {
                        this.isShow = false;
                    }

                }

            },
        },
    };
</script>
<style>
    .main-content.index-wrapper {
        background: white;
    }

    .addTr {
        margin-top: 20px;
        font-size: 16px;
        cursor: pointer;
    }

    .addTr .addIco {
        display: inline-block;
        width: 26px;
        height: 26px;
        margin-right: 5px;
        vertical-align: bottom;
    }

    .delIco {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }

    .selBtm {
        width: 100%;
        margin-bottom: 5px;
        height: 40px;
    }

    .fontSize {
        font-size: 16px;
    }

    .tr {
        margin-bottom: 10px;
        margin-top: 10px;
        cursor: pointer;
    }

    .dv_hang {
        margin-bottom: 10px;
    }

    .el-form-item.is-overflow-ellipsis .el-form-item__content {
        width: 100%;
    }

    .el-form--inline .el-form-item__content {
        width: 100%;
    }

    .pTip {
        font-size: 16px;

    }

    .pTip p {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .pTip .p2 {
        color: #a30014;
        display: inline-block;
        word-break: break-all;
        line-height: 40px;
    }

    .marg {
        margin-bottom: 20px;
    }

    .marg p {
        padding: 10px;
        padding-left: 0;
    }

    .dialog-footer {
        margin-top: 20px;
        text-align: right;
    }
</style>
